var drawText = function(canvans, str) {
    var c = canvans;
    var ctx = c.getContext("2d");
    var mask;
    
    var pointCount = 500;
    var fontStr = "bold 128pt Helvetica Neue, Helvetica, Arial, sans-serif";
    
    ctx.font = fontStr;
    ctx.textAlign = "center";
    c.width = ctx.measureText(str).width;
    c.height = 128; // Set to font size
    
    var whitePixels = [];
    var points = [];
    var point = function(x,y,vx,vy){
      this.x = x;
      this.y = y;
      this.vx = vx || 1;
      this.vy = vy || 1;
    }
    point.prototype.update = function() {
      ctx.beginPath();
      ctx.fillStyle = "#95a5a6";
      ctx.arc(this.x,this.y,1,0,2*Math.PI);
      ctx.fill();
      ctx.closePath();
      
      // Change direction if running into black pixel
      if (this.x+this.vx >= c.width || this.x+this.vx < 0 || mask.data[coordsToI(this.x+this.vx, this.y, mask.width)] != 255) {
        this.vx *= -1;
        this.x += this.vx*2;
      }
      if (this.y+this.vy >= c.height || this.y+this.vy < 0 || mask.data[coordsToI(this.x, this.y+this.vy, mask.width)] != 255) {
        this.vy *= -1;
        this.y += this.vy*2;
      }
      
      for (var k = 0, m = points.length; k<m; k++) {
        if (points[k]===this) continue;
        
        var d = Math.sqrt(Math.pow(this.x-points[k].x,2)+Math.pow(this.y-points[k].y,2));
        if (d < 5) {
          ctx.lineWidth = .2;
          ctx.beginPath();
          ctx.moveTo(this.x,this.y);
          ctx.lineTo(points[k].x,points[k].y);
          ctx.stroke();
        }
        if (d < 20) {
          ctx.lineWidth = .1;
          ctx.beginPath();
          ctx.moveTo(this.x,this.y);
          ctx.lineTo(points[k].x,points[k].y);
          ctx.stroke();
        }
      }
      
      this.x += this.vx;
      this.y += this.vy;
    }
    
    function loop() {
      ctx.clearRect(0,0,c.width,c.height);
      for (var k = 0, m = points.length; k < m; k++) {
        points[k].update();
      }
    }
    
    function init() {
      // Draw text
      ctx.beginPath();
      ctx.fillStyle = "#000";
      ctx.rect(0,0,c.width,c.height);
      ctx.fill();
      ctx.font = fontStr;
      ctx.textAlign = "left";
      ctx.fillStyle = "#fff";
      ctx.fillText(str,0,c.height/2+(c.height / 2));
      ctx.closePath();
      
      // Save mask
      mask = ctx.getImageData(0,0,c.width,c.height);
      
      // Draw background
      ctx.clearRect(0,0,c.width,c.height);
      
      // Save all white pixels in an array
      for (var i = 0; i < mask.data.length; i += 4) {
        if (mask.data[i] == 255 && mask.data[i+1] == 255 && mask.data[i+2] == 255 && mask.data[i+3] == 255) {
          whitePixels.push([iToX(i,mask.width),iToY(i,mask.width)]);
        }
      }
      
      for (var k = 0; k < pointCount; k++) {
        addPoint();
      }
    }
    
    function addPoint() {
      var spawn = whitePixels[Math.floor(Math.random()*whitePixels.length)];
      
      var p = new point(spawn[0],spawn[1], Math.floor(Math.random()*2-1), Math.floor(Math.random()*2-1));
      points.push(p);
    }
    
    function iToX(i,w) {
      return ((i%(4*w))/4);
    }
    function iToY(i,w) {
      return (Math.floor(i/(4*w)));
    }
    function coordsToI(x,y,w) {
      return ((mask.width*y)+x)*4;
    
    }
    
    setInterval(loop,50);
    init();
}

export {
    drawText
}